import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hockey/extensions/jzx_widget_extension.dart';
import 'package:hockey/jzx_apps.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

import 'controller.dart';

class JzxPublishPostView extends GetView<JzxPublishPostController> {
  const JzxPublishPostView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: JzxAAppBar(
        centerTitle: false,
        titleWidget: Obx(
          () => Text.rich(
            TextSpan(children: [
              TextSpan(
                  text: '${controller.contentlength.value}',
                  style: myAppColors.white.font_16.medium),
              TextSpan(text: '/500', style: myAppColors.white.font_12.medium),
            ]),
          ).paddingOnly(left: 10),
        ),
        actions: [
          Center(
            child: InkWell(
              onTap: () {
                controller.submitPost();
              },
              child:
                  Assets.images.icPost.image(height: 32).paddingOnly(right: 20),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.all(10),
          margin: EdgeInsets.only(
              top: kNavigationBarHeight + 28.w,
              bottom: 20,
              left: 20,
              right: 20),
          decoration: BoxDecoration(
            color: const Color(0x26FFFFFF),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Column(
            children: [
              CupertinoTextField(
                controller: controller.title,
                placeholder: 'Type your title',
                maxLength: 100,
                placeholderStyle: const TextStyle(color: Color(0x80FFFFFF)),
                padding:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 6),
                maxLines: null,
                decoration: const BoxDecoration(color: Colors.transparent),
                style: TextStyle(
                  fontSize: 16.sp,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
              JzxGaps.line,
              Container(
                constraints: BoxConstraints(minHeight: 60.w),
                alignment: Alignment.topLeft,
                child: CupertinoTextField(
                  controller: controller.content,
                  placeholder: 'Start your creation...',
                  maxLength: 500,
                  placeholderStyle: const TextStyle(color: Color(0x80FFFFFF)),
                  padding:
                      const EdgeInsets.symmetric(vertical: 10, horizontal: 6),
                  maxLines: null,
                  decoration: const BoxDecoration(color: Colors.transparent),
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: Colors.white,
                  ),
                ),
              ),
              Obx(() => GridView.builder(
                    padding: EdgeInsets.zero,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      crossAxisSpacing: 16,
                      mainAxisSpacing: 16,
                      childAspectRatio: 94 / 116,
                    ),
                    itemCount: controller.images.length + 1,
                    itemBuilder: (context, index) {
                      if (controller.images.length == index ||
                          controller.images.isEmpty) {
                        return index >= controller.maxCount
                            ? const SizedBox.shrink()
                            : InkWell(
                                onTap: () {
                                  controller.pickerImages(context);
                                },
                                child: Assets.images.icImagesAdd.image(),
                              );
                      }
                      return Stack(
                        children: [
                          Positioned.fill(
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(6),
                              child: AssetEntityImage(
                                controller.images.value[index],
                                isOriginal: false,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          Positioned(
                            right: 0,
                            bottom: 0,
                            child: InkWell(
                              onTap: () {
                                controller.removeImage(index);
                              },
                              child: Assets.images.icImagesDel.image(),
                            ),
                          )
                        ],
                      );
                    },
                  )),
            ],
          ),
        ),
      ).backgroud(Assets.images.normalBgv),
    );
  }
}
